<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>授权管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色添加</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
                        <el-form-item label="角色名称" prop="name">
                            <el-input v-model="roleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
                        <el-form-item label="权限列表">
                            <el-tree :data="treeData" show-checkbox :default-expand-all="false" node-key="id" ref="tree"
                                     highlight-current :props="defaultProps" check-on-click-node>
                            </el-tree>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('roleForm')">立即创建</el-button>
                        <a onclick="javascript:history.back(-1);">
                            <el-button>返回</el-button>
                        </a>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //表单内容
                roleForm: {
                    name: '',
                    tree: [],
                },
                //表单字段验证项
                rules: {
                    name: [{
                        required: true,
                        message: '请填写角色名称',
                        trigger: 'blur'
                    }]
                },
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }

            }
        },
        async mounted() {
            this.ajaxFunction();
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs.tree.setCheckedKeys([]);
            },
            async submitForm(formName) {
                var tempForm = this.roleForm;
                tempForm.tree = this.$refs.tree.getCheckedKeys() + "," + this.$refs.tree.getHalfCheckedKeys();
                var bool = false;
                var msg = '';
                this.$refs[formName].validate(async function (valid) {
                    if (valid) {
                        //提交
                            $.ajax({
                                url: '/role/add.json',
                                type: 'post',
                                data: tempForm,
                                async: false,
                                dataType: 'json',
                                success: function (result) {
                                    if (result.ret) {
                                        bool = result.ret;
                                    } else {
                                        msg = result.msg;
                                    }
                                }
                            });
                    } else {
                        this.$message.error("请求错误");
                        return false;
                    }
                });
                if (bool) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    setTimeout(function () {
                        window.location.href = "/role/list.page";
                    }, 1000);
                } else {
                    this.$message.error(msg);
                }
            },
            ajaxFunction() {
                var resultData = '';
                $.ajax({
                    url: '/permission/permissionTreeList.json',
                    type: 'get',
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.ret) {
                            resultData = result.data;
                        }
                    }
                });
                this.treeData = resultData;
            },
        },
    })
</script>

</body>

</html>